<template>
  <div class="magazineListBox">
    <van-nav-bar class="head" title="电子杂志" left-text="" left-arrow />

    <div class="main">
      <div class="title">
        <h3>《消费杂志》2021年第12期</h3>
        <p>2021-12-11</p>
      </div>

      <div
        class="mainList"
        @click="showBox"
        v-for="(item, index) in tabledata"
        :key="index"
      >
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="4">
            <van-image width="59px" height="59px" fit="cover" :src="item.img" />
          </van-col>
          <van-col span="18">
            <p>{{ item.title }}</p>
          </van-col>
          <van-col span="1"></van-col>
        </van-row>
        <van-divider style="background-color: #000; margin: 20.3125px 25px" />
      </div>
    </div>

    <!-- 弹框 -->
    <van-dialog
      v-model="show"
      width="514px"
      show-confirm-button
      confirmButtonText="开始阅读"
      confirm-button-color="rgba(42, 131, 78, 1)"
    >
      <p style="padding-bottom: 0; margin-top: 50px">阅读此条杂志需要</p>
      <p style="margin-top: 0; padding-top: 0">10个积分</p>
      <a href="">试读</a>
    </van-dialog>
  </div>
</template>

<script>
import {magazineRouter} from "../../api/index"
export default {
  data() {
    return {
      show: false,
      tabledata: [
        {
          id: 1,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 2,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 3,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 4,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 5,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 6,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 7,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 8,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
        {
          id: 9,
          title: "今天天气不太好，希望明天天气好",
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
        },
      ],
    };
  },
created(){
  this.GetmagazineRouter();
},
  methods: {
    showBox() {
      this.show = !this.show;
    },
    async GetmagazineRouter(){
      let obj = {
        category:"5",
        pagenum:"1",
        pagesize:"10"
      }
      let {data:{lists},total,meta:{msg,status}} = await magazineRouter(obj);
        if(status == 200){
        this.tabledata = lists;         
        }
    }
  },
};
</script>

<style lang="less" scoped>
.magazineListBox {
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
  }
  /deep/.van-nav-bar .van-icon {
    color: rgba(153, 153, 153, 1);
  }
  /deep/.van-nav-bar__title {
    color: rgba(42, 131, 78, 1);
    font-size: 18px;
  }
  .main {
    padding-top:55px;
    .title {
      text-align: center;
      h3 {
        color: rgba(42, 131, 78, 1);
        font-size: 16px;
      }
      p {
        margin: 0;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        margin-right: 25px;
        text-align: right;
      }
    }
    .mainList {
      margin-top: 28.75px;
      p {
        margin: 0;
        font-size: 15px;
      }
      .van-button {
        background-color: rgba(42, 131, 78, 1);
      }
    }
  }
  .van-dialog {
    background-color: rgba(229, 229, 229, 1);
    p {
      padding: 58.75px;
      font-size: 28.125px;
    }
    a {
      display: inline-block;
      color: rgba(42, 131, 78, 1);
      margin: 62.5px auto;
      font-size: 21.875px;
    }
    .van-button {
      background-color: rgba(42, 131, 78, 1);
    }
  }
}
</style>